{extend name="public/common"}

{block name="style"}
<title>我的加班</title>
<link rel="stylesheet" href="/home/css/attendance/overtime.css?v={$Think.config.version}">
{/block}

{block name="body"}
<div id="app" v-cloak>
    <div class="fixed">
        <div class="tabbar">
            <div class="tabbar_item" @click="toSignPage">加班考勤</div>
            <div class="tabbar_item active">我的加班</div>
        </div>
    </div>
    <div infinite-scroll-immediate-check="false" v-infinite-scroll="loadMore"
         infinite-scroll-disabled="loading"
         infinite-scroll-distance="10"
        class="list_box"
    >
        <div class="list">
            <div class="list_item" v-for="(item,index) in list">
                <div class="top">
                    <div>{{item.type_text}}</div>
                    <div>{{item.hour}} 小时</div>
                </div>
                <div class="bottom">
                    <div class="schedule">
                        <span class="circle"></span>
                        <span class="line"></span>
                        <span class="line"></span>
                        <span class="circle"></span>
                    </div>
                    <div class="content">
                        <div class="mini">
                            <p class="in-off">签到时间： {{item.start_time}}</p>
                            <p class="address">{{item.start_address?item.start_address:''}}</p>
                        </div>
                        <div>
                            <p class="in-off">签退时间： {{item.end_time}}</p>
                            <p class="address">{{item.end_address?item.end_address:''}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="loading-more" v-if="len >= 8">
            <div v-if="loadOver && len >= 8" class="load" style="font-size:0.3rem">{{texts}}</div>
            <div v-else v-show="loading">
                <mt-spinner :type="3" color="#999"></mt-spinner>
            </div>
        </div>
        <div class="empty" v-if="len == 0">
            <img class="empty-img" src="/home/images/common/empty.png" alt="">
            <p class="empty-title">暂无内容，敬请期待</p>
            <p class="empty-text">to be continued...</p>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script>
    console.log({$list})
    var vw = new Vue({
        el: "#app",
        data: {
            list: {$list},
            len: {$list}.length,
            texts: '没有更多了~',
            loadOver: true,
            loading: false
        },
        mounted() {},
        methods: {
            loadMore() {
                var _this = this;
                if (_this.len < 8) {
                    return false
                }
                _this.loading = true;
                _this.loadOver = false;
                _this.$http.post('{:Url("Attendance/overtime_record")}', {
                    'length': _this.len
                }, {emulateJSON: true}).then(function (res) {
                    var data = res.body;
                    console.log(data)
                    if (data.code == 1) {
                        if (data.data.length == 8) {
                            _this.loading = false;
                        } else {
                            _this.loadOver = true;
                        }
                        for(var i in data.data){
                            _this.list.push(data.data[i]);
                        }
                        _this.len = _this.list.length;
                    } else {
                        _this.loadOver = true;
                    }
                }, function () {
                    _this.$toast({message: '加载失败，请重试', duration: 1500});
                    _this.loadOver = true;
                })
            },
            toSignPage() {
                window.location.href = '/home/attendance/overtime.html';
            }
        }
    });
</script>
{/block}
